<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">Popup</view>
			<view class="tui-page__desc">弹层动画，过渡效果</view>
		</view>
		<view class="tui-page__bd tui-page__spacing">
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto" @click="shown(['fade'], true)">fade</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="40rpx auto" @click="shown(['slide-top'])">slide-top</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto" @click="shown(['slide-left'])">slide-left</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="40rpx auto" @click="shown(['slide-right'])">slide-right</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto" @click="shown(['slide-bottom'])">slide-bottom</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="40rpx auto" @click="shown(['zoom-in', 'fade'])">zoom-in</tui-button>
			<tui-button type="gray-primary" :size="34" bold width="372rpx" height="84rpx" margin="0 auto" @click="shown(['zoom-out', 'fade'])">zoom-out</tui-button>
			<tui-popup :duration="500" :modeClass="mode" :styles="styles" :show="transShow" @click="onTap" @change="change">
				<view class="tui-text">
					<view>ThorUI文档地址：</view>
					<view>https://thorui.cn/doc</view>
				</view>
			</tui-popup>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			transShow: false,
			mode: ['fade'],
			styles: {
				position: 'fixed',
				bottom: 0,
				top: 0,
				left: 0,
				right: 0,
				/* #ifndef APP-NVUE */
				display: 'flex',
				/* #endif */
				'justify-content': 'center',
				'align-items': 'center'
			}
		};
	},
	methods: {
		shown(mode, mask) {
			if (mask) {
				this.$set(this.styles, 'backgroundColor', 'rgba(0,0,0,0.4)');
			} else {
				this.$set(this.styles, 'backgroundColor', 'rgba(0,0,0,0)');
			}
			setTimeout(() => {
				this.mode = mode;
				this.transShow = !this.transShow;
			}, 20);
		},
		onTap() {
			this.transShow = false;
			this.show = false;
		},
		change(e) {
			console.log(e.detail);
		}
	}
};
</script>

<style>
.tui-text {
	width: 160px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	color: #fff;
	background-color: #5677fc;
}
</style>
